import React, { Component } from 'react';
 import {
   View,
   StyleSheet,
   AppRegistry,
   TouchableHighlight,
   TouchableOpacity,
   Image,
   Dimensions,
   Platform,
   RefreshControl,
 } from 'react-native';

// import STRING from '../const_string_zh_CN';

import {Container, Content, Card, CardItem, Thumbnail, Text, Button,Icon,Spinner } from 'native-base';
import {NavigationActions} from 'react-navigation';
import { connect } from 'react-redux';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;

class tab_list extends Component {
    constructor(props){
        super(props);
        this.state = {
            message_list_array: null,
        };
        this.message_array = [
            {
                top_time:'6月1号 晚上12:34',
                title:'互联网+研究班',
                title_time:'6月1号',
                image:'../../images/login.png',
                content:'互联网的发展',
                check:'查看通知，去签到'
            },
            {
                top_time:'6月1号 晚上1:34',
                title:'互联网+研究班2222',
                title_time:'6月1号',
                image:'../../images/login.png',
                content:'互联网的发展22222',
                check:'查看通知，去签到2'
            },
        ];
    }
    render_card(array) {
        const{navigate} = this.props.navigation;
        // const {MessageList} = this.props;
        return array.map((v, i) => {
            return (
                    <Card key={i}>
                       <CardItem>
                            <Text note style={StyleSheet.flatten(styles.time_style)}>
                               {v.addtime}
                            </Text>
                        </CardItem>
                         <CardItem button onPress={ () => navigate('MessageDetailTab')}>
                        <View style={StyleSheet.flatten(styles.cardview_style)}>
                            <Text style={StyleSheet.flatten(styles.title_style)}>{v.title}</Text>
                             <Text style={StyleSheet.flatten(styles.title_time_style)}>{v.addtime}</Text>
                             <Image style={StyleSheet.flatten(styles.image_style)} source={require('../../images/login.png')} />
                             <Text style={StyleSheet.flatten(styles.content_style)}>{v.content}</Text>
                             <Text style={StyleSheet.flatten(styles.button_style)}>
                             <Text style={StyleSheet.flatten(styles.check_style)}>查看通知</Text>
                             {/*<Text style={StyleSheet.flatten(styles.sign_style)}>签到</Text>*/}
                             </Text>
                        </View>
                        </CardItem>
                   </Card>
            );
        })
    }
    render() {
           const{navigate} = this.props.navigation;
        //需要判断
         if (this.state.message_list_array==null) {
            return this.renderLoadingView();
        }
          return (
            <Container>
                <Content>
                    <Content refreshControl={<RefreshControl refreshing={false} />} scrollEnabled={true}>
                        {this.render_card(this.state.message_list_array)}
                    </Content>
                </Content>
            </Container>
          );
      }
     //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    {/*<Spinner color='green' />*/}
                </Content>
            </Container>
        );
    }
    async componentWillMount() {
        const { school_info } = this.props;
        // let messageList=school_info.school_data;
        let messageList=null;
        
        console.log('messagelist');
        console.log(messageList);
        this.setState({ 
            message_list_array:messageList
        });
  
    }
  }



const styles = StyleSheet.create({
    time_style:{
        width:width,
        textAlign :'center'
    },
    cardview_style: {
        width:width-20,
        height:height/2,
        marginLeft:-10,
        backgroundColor:'white',
        borderWidth:1,
        borderColor:'grey'
    },
    title_style:{
        marginTop:10,
        marginLeft:10
    },
    title_time_style:{
        fontSize:12,
        marginLeft:10,
        color:'grey'
    },
    image_style:{
        marginLeft:10,
        marginTop:10,
        width: width-40,
        height: height / 4+20
    },
    content_style:{
        fontSize:12,
        marginLeft:10,
        color:'grey',
        marginTop:10
    },
    button_style:{
        marginLeft:10,
        marginTop:20,
    },
    check_style:{
        fontSize:12,
    },
    // sign_style:{
    //     backgroundColor:'#C5C1AA',
    //     textAlign:'center',
    //     marginLeft:30
    // }

  });

//从公共reducers获取数据login_info
function mapStateToProps(state) {
    return {
        school_info: state.message.school_info,
    }
}

//将获取的数据抛给reducers
function mapDispatchToProps(dispatch) {
    return {
         
    }
}

const MessageInteract = connect(
    mapStateToProps,
    mapDispatchToProps
)(tab_list)

export default MessageInteract;